<template>
	<view class="order_container flex flex_d_c">
		<view class="flex v_end h_sb">
			<up-image :show-loading="true" src="/static/images/icon_4.png" width="93rpx" height="43rpx"></up-image>
			<up-text text="已完成" color="#844c2a" size="10" align="right"></up-text>
		</view>
		<view class="margin_top_10 flex v_center h_sb">
			<up-text text="长兴县泗安镇东道口村太湖梅花博览园内" color="#8e8e8e" size="10" style="flex: 2;"></up-text>
			<up-text text="2025-07-10 14:43:32" color="#666666" size="10" align="right" style="flex: 1;"></up-text>
		</view>
		<view class="flex v_center h_sb margin_top_25">
			<view class="flex v_center">
				<up-avatar text="text" :size="50"></up-avatar>
				<view class="flex flex_d_c h_center margin_left_15">
					<up-text text="来杯冯老师特制冰美式" bold color="#2d2d2d" size="13"></up-text>
					<up-text text="阿拉比卡咖啡豆深烘" color="#2d2d2d" size="13"></up-text>
				</view>
			</view>
			<view class="flex flex_d_c h_center">
				<view class="flex v_baseline">
					<text class="text_1">¥</text>
					<text class="text_2">99</text>
				</view>
				<up-text text="共1件" color="#333333" size="10"></up-text>
			</view>
		</view>
		<view class="flex h_end margin_top_25">
			<up-button text="再来一单" color="#b37547" shape="circle" :custom-style="{
				width: '160rpx',
				color: '#333333',
				margin: 0
			}"></up-button>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.order_container {
	padding: 30rpx 35rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin-bottom: 30rpx;

	.text_1 {
		font-size: 10px;
		color: #2d2d2d;
	}

	.text_2 {
		font-size: 18px;
		color: #2d2d2d;
		font-weight: bold;
	}
}
</style>

<style lang="scss" scoped>
/* 自定义 css */
.flex {
	display: flex;
}

.flex_d_c {
	flex-direction: column;
}

.h_sb {
	justify-content: space-between;
}

.h_start {
	justify-content: flex-start;
}

.h_center {
	justify-content: center;
}

.h_end {
	justify-content: flex-end;
}

.v_center {
	align-items: center;
}

.v_end {
	align-items: flex-end;
}

.v_baseline {
	align-items: baseline;
}

.margin_top_10 {
	margin-top: 10rpx;
}

.margin_left_15 {
	margin-left: 15rpx;
}

.margin_top_25 {
	margin-top: 25rpx;
}</style>